
<div class="portlet-body form">
    <form id="form_inscription" action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="form-horizontal" >
        <div class="form-wizard">
            <div class="navbar steps">
                <div>

                </div>
                <div class="navbar-inner">
                    <ul class="row-fluid">
                        <li class="span3">
                            <a href="#tab1" data-toggle="tab" class="step active">
                                <span class="number">1</span>
                                <span class="desc"><i class="icon-ok"></i> Account Setup</span>   
                            </a>
                        </li>
                        <li class="span3">
                            <a href="#tab2" data-toggle="tab" class="step">
                                <span class="number">2</span>
                                <span class="desc"><i class="icon-ok"></i> Information Personnelle</span>   
                            </a>
                        </li>
                        <li class="span3">
                            <a href="#tab3" data-toggle="tab" class="step">
                                <span class="number">3</span>
                                <span class="desc"><i class="icon-ok"></i> Societé Information</span>   
                            </a>
                        </li>
                        <li class="span3">
                            <a href="#tab4" data-toggle="tab" class="step">
                                <span class="number">4</span>
                                <span class="desc"><i class="icon-ok"></i> Confirmation</span>   
                            </a> 
                        </li>
                    </ul>
                </div>
            </div>
            <div id="bar" class="progress progress-success progress-striped">
                <div class="bar"></div>
            </div>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <h3 class="block">Provide your account details</h3>
                    <div class="control-group">
                        <label class="control-label">Pseudo</label>
                        <div class="controls">
                                           {{ form_widget(form.username,{'attr':{'class':'span6 m-wrap'}})}}
                            </div>
                        </div>


                        <div class="control-group">
                            <label class="control-label">Adresse Email</label>
                            <div class="controls">
                                           {{ form_widget(form.email,{'attr':{'class':'span6 m-wrap'}})}}

                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Mot de Passe</label>
                                <div class="controls">
                                           {{ form_widget(form.plainPassword.first,{'attr':{'class':'span6 m-wrap'}})}}
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">Retapez Mot de Passe</label>
                                    <div class="controls">
                                           {{ form_widget(form.plainPassword.second,{'attr':{'class':'span6 m-wrap'}})}}

                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label">Type</label>
                                        <div class="controls">
                                           {{ form_widget(form.type,{'attr':{'class':'span6 m-wrap'}})}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tab2">
                                        <h3 class="block">Fournir des détails de votre profil</h3>
                                        <div class="control-group">
                                            <label class="control-label">Nom</label>
                                            <div class="controls">
{{ form_widget(form.nom,{'attr':{'class':'span6 m-wrap'}})}}                                        
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">Prénom</label>
                                                <div class="controls">
                                        {{ form_widget(form.prenom,{'attr':{'class':'span6 m-wrap'}})}}  

                                                    </div>
                                                </div>
                                                <div class="control-group">
                                                    <label class="control-label">GSM</label>
                                                    <div class="controls">
                                        {{ form_widget(form.gsm,{'attr':{'class':'span6 m-wrap'}})}}  

                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">Civilité</label>
                                                        <div class="controls">
{{ form_widget(form.civilite,{'attr':{'class':'span6 m-wrap'}})}}  

                                                           
                                                        </div>
                                                    </div>
                                                    <div class="control-group">
                                                        <label class="control-label">Ville</label>
                                                        <div class="controls">
                                         {{ form_widget(form.ville,{'ville':{'class':'span6 m-wrap'}})}}                                        


                                                            </div>
                                                        </div>
                                                        <div class="control-group">
                                                            <label class="control-label">Adresse de Livraison</label>
                                                            <div class="controls">
{{ form_widget(form.adresseDeLivraison,{'adresseDeLivraison':{'class':'span6 m-wrap'}})}}                                           
                                                                </div>
                                                            </div>

                                                            <div class="control-group">
                                                                <label class="control-label">Code Postale</label>
                                                                <div class="controls">
                                          {{ form_widget(form.codePostale,{'attr':{'class':'span6 m-wrap'}})}}  
                                                                        <span class="help-inline"></span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="tab-pane" id="tab3">
                                                                <h3 class="block">Provide your billing and credit card details</h3>
                                                                <div class="control-group">
                                                                    <label class="control-label">Raison Sociale</label>
                                                                    <div class="controls">
                                         {{ form_widget(form.raisonSociale,{'attr':{'class':'span6 m-wrap'}})}} 
                                                                            <span class="help-inline"></span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="control-group">
                                                                        <label class="control-label">Telephone Fixe</label>
                                                                        <div class="controls">
                                   {{ form_widget(form.telephoneFixe,{'attr':{'class':'span6 m-wrap'}})}} 

                                                                                <span class="help-inline"></span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="control-group">
                                                                            <label class="control-label">Fax</label>
                                                                            <div class="controls">
                                         {{ form_widget(form.fax,{'attr':{'class':'span6 m-wrap'}})}} 
                                                                                    <span class="help-inline"></span>
                                                                                </div>
                                                                            </div>
                                                                            <div class="control-group">
                                                                                <label class="control-label">Adresse</label>
                                                                                <div class="controls">
                                        {{ form_widget(form.adresse,{'attr':{'class':'span6 m-wrap'}})}} 
                                                                                        <span class="help-inline"></span>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="control-group">
                                                                                    <label class="control-label">Localité</label>
                                                                                    <div class="controls">
                                         {{ form_widget(form.localite,{'attr':{'class':'span6 m-wrap'}})}} 
                                                                                            <span class="help-inline"></span>
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="control-group">
                                                                                        <label class="control-label">Categorie</label>
                                                                                        <div class="controls">
                                           {{ form_widget(form.categorie,{'attr':{'class':'span6 m-wrap'}})}}
                                                                                            </div>
                                                                                        </div>



                                                                                        <div class="tab-pane" id="tab4">
                                                                                            <h3 class="block">Confirmer votre compte</h3>

                                                                                            <div class="control-group">
                                                                                                <label class="control-label"></label>
                                                                                                <div class="controls">
                                                                                                    <label class="checkbox">
                                                                                                        <input type="checkbox" value="" /> Je confirme mon compte
                                                                                                    </label>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                       {{ form_widget(form) }}
                                                                                    </div>
                                                                                    <div class="form-actions clearfix">
                                                                                        <a href="javascript:;" class="btn button-previous">
                                                                                            <i class="m-icon-swapleft"></i> Back 
                                                                                        </a>
                                                                                        <a href="javascript:;" class="btn blue button-next">
                                                                                            Continue <i class="m-icon-swapright m-icon-white"></i>
                                                                                        </a>
                                                                                        <a href="javascript:enregisterUser();" class="btn green button-submit">
                                                                                            Submit <i class="m-icon-swapright m-icon-white"></i>
                                                                                        </a>
                                                                                    </div>
                                                                                </div>
                                                                        </form>
                                                                    </div>
                                                                    <script>
                                                                        function enregisterUser(){
                                                                    $('#form_inscription').submit()
                                                                    }
                                                                        </script>